<ion-header>
    <ion-toolbar>
        <ion-buttons slot="start">
            <ion-back-button [text]="'core.back' | translate" />
        </ion-buttons>
        <ion-title>
            <h1>
                <core-site-logo logoType="top" />
            </h1>
        </ion-title>
        <ion-buttons slot="end">
            <core-user-menu-button />
        </ion-buttons>
    </ion-toolbar>
</ion-header>
<ion-content>
    <ion-refresher slot="fixed" [disabled]="!loaded" (ionRefresh)="refresh($event.target)">
        <ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}" />
    </ion-refresher>
    <core-loading [hideUntil]="loaded">
        <ion-item class="ion-text-wrap divider">
            <ion-label>
                <h2 class="big" id="core-courses-my-title">{{ 'core.courses.mycourses' | translate }}</h2>
            </ion-label>
            <div slot="end" class="flex-row">
                <!-- Download all courses. -->
                @if (downloadCoursesEnabled && myOverviewBlock && myOverviewBlock.filteredCourses.length > 0) {
                    <div class="core-button-spinner">
                        @if (!myOverviewBlock.prefetchCoursesData.loading) {
                            <ion-button fill="clear" size="default" (click)="myOverviewBlock.prefetchCourses()"
                                [attr.aria-label]="myOverviewBlock.prefetchCoursesData.statusTranslatable | translate">
                                <ion-icon [name]="myOverviewBlock.prefetchCoursesData.icon" slot="icon-only" aria-hidden="true" />
                            </ion-button>
                        }
                        @if (myOverviewBlock.prefetchCoursesData.badge) {
                            <ion-badge class="core-course-download-courses-progress" role="progressbar"
                                [attr.aria-valuemax]="myOverviewBlock.prefetchCoursesData.total"
                                [attr.aria-valuenow]="myOverviewBlock.prefetchCoursesData.count"
                                [attr.aria-valuetext]="myOverviewBlock.prefetchCoursesData.badgeA11yText">
                                {{myOverviewBlock.prefetchCoursesData.badge}}
                            </ion-badge>
                        }
                        @if (myOverviewBlock.prefetchCoursesData.loading) {
                            <ion-spinner [attr.aria-label]="'core.loading' | translate" />
                        }
                    </div>
                }
            </div>
        </ion-item>
        <ion-list>
            @if (loadedBlock?.visible) {
                <core-block [block]="loadedBlock" contextLevel="user" [instanceId]="userId" labelledBy="core-courses-my-title" />
            }
        </ion-list>

        @if (hasSideBlocks) {
            <core-block-side-blocks-button slot="fixed" contextLevel="user" [instanceId]="userId" [myDashboardPage]="myPageCourses" />
        }

        @if (!loadedBlock) {
            <core-empty-box icon="fas-cubes" [message]="'core.course.nocontentavailable' | translate" />
        }
    </core-loading>
</ion-content>
